<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/base.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
    <style>
        *{
            padding:0px;
            margin: 0px;
        }
        body {
            background-color: #f1f1f1;
        }

        .body-content {
            display: block;
            background-color: #fff;
            min-width: 1600px;
            min-height: 1200px;
            margin: auto;
            margin-top: 10px;
            width: 98%;
            height: 98vh;
        }
        .piece {
            border: 1px solid #8a8a8a;
            margin-left: 10px;
            display: inline-block;
        }

        .piece .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: rgba(118, 162, 6, 1);
            border: 1px solid rgba(138, 138, 138, 1);
            text-align: center;
            color: #fff;
            font-size: 19px;
        }

        .piece .content ul {
            margin: 0px;
            padding: 0px;
            display: inline-block;
        }

        .piece .content ul li {
            width: 100%;
            list-style: none;
            display: block;
            height: 35px;
            border-bottom: 1px solid #8A8A8A;
        }

        .piece .content ul li:nth-last-child(1) {
            border: none;
        }

        .piece .content ul li span {
            width: 120px;
            text-align: right;
            color:#fff;
            background: #76A206;
            display: inline-block;
            height: 36px;
            line-height: 36px;
            padding-right: 10px;
            padding-left: 10px;
        }
        .piece .content ul li input {
            text-indent: 10px;
            border: none;
            width: 160px;
            height: 33px;
            line-height: 33px;
            padding: 0px;
            margin: 0px;
        }

        .piece .content ul li select {
            display: inline-block;
            text-indent: 10px;
            border: none;
            background: none;
            width: 160px;
            height: 35px;
            line-height: 35px;
            padding: 0px;
            margin: 0px;
        }

        .goods-search-1{
            position: absolute;
            top:20px;
            left:20px;
        }
        .goods-search-2{
            position: absolute;
            top:20px;
            left:325px;
        }
        .goods-list{
            position: absolute;
            top: 155px;
            left: 20px;
            border-collapse: collapse;
        }
        .goods-list tr{
            border-collapse: collapse;
        }
        .goods-list thead tr th{
            background-color: #76A206;
            min-width: 150px;
            min-height: 30px;
            text-align: center;
            border: 1px solid #000;
            color: #fff;
        }
        .goods-list thead tr td{
            background-color: #76A206;
            min-width: 75px;
            text-align: center;
            min-height: 30px;
            border: 1px solid #000;
        }

        .goods-list tbody tr td{
            background-color: #fff;
            min-width: 75px;
            text-align: center;
            min-height: 30px;
            border: 1px solid #000;
        }

        .search-button{
            display: block;
            position: absolute;
            left: 680px;
            top: 50px;
            line-height: 40px;
            color: #fff;
            width: 100px;
            text-align: center;
            height: 40px;
            background: #00B050;
            text-decoration: none;
        }
        .xlsx-button{
            background: #FF5733;
            display: block;
            position: absolute;
            left: 800px;
            top: 50px;
            line-height: 40px;
            color: #fff;
            width: 160px;
            text-align: center;
            height: 40px;
            text-decoration: none;
        }
        .xlsx-div{
            position: fixed;
            top:20%;
            left:10%;
            width:80%;
            height:60%;
            z-index: 1001;
            background-color: #fff;
            overflow:auto;
            display: none;
            margin-left: -3px;
            border: 3px solid #000;
            border-bottom: none;
        }
        .xlsx-div table{
            margin: auto;
            border-collapse: collapse;
        }
        .xlsx-div table th{
            border: 1px solid #000;
            min-width: 100px;
            min-height: 30px;
        }
        .xlsx-div table td{
            border: 1px solid #000;
            min-width: 100px;
            min-height: 30px;
        }
        .x{
            display: inline-block;
            text-align: center;
            padding: 5px 20px;
            margin-right:15px;
            text-decoration: none;
            background-color: #00B050;
            color: #fff;
        }
        .q{
            display: inline-block;
            text-align: center;
            padding: 5px 20px;
            margin-right:15px;
            text-decoration: none;
            background-color: #00B050;
            color: #fff;
        }
        .button{
            position: fixed;
            left: 10%;
            top:80%;
            width: 80%;
            text-align: right;
            display: none;
            margin-left: -3px;
            border: 3px solid #000;
            border-top: none;
        }
    </style>
</head>
<div class="body-content">
    <div class="xlsx-div" id="xlsx-div">
        <table id="xlsx-table"></table>
    </div>
    <div class="button" id="button">
        <a href="javascript:exportTableToExcel('xlsx-table');" class="x">下载</a>
        <a href="javascript:notxlsx();" class="q">取消</a>
    </div>
    <div class="piece goods-search-1">
        <div class="content">
            <ul>
                <li>
                    <span>材质:</span>
                    <select id="material" onchange="set_material_data(this.value)">
                        <option value="304">304</option>
                        <option value="316L">316L</option>
                        <option value="2205">2205</option>
                        <option value="2507">2507</option>
                    </select>
                </li>
                <!-- <li>
                    <span>产品名称:</span>
                    <select id="goods_name" onchange="set_goods_strand(this.value)"></select>
                </li> -->
                <li>
                    <span>管外径:</span>
                    <select id="piping">
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
    <div class="piece goods-search-2">
        <div class="content">
            <ul>
                <!-- <li>
                    <span>产品标准:</span>
                    <select id="goods_standard">
                        <option value="HG/T20592-2009">HG/T20592-2009</option>
                        <option value="HG/T20615-2009">HG/T20615-2009</option>
                        <option value="非标法兰">非标法兰</option>
                    </select>
                </li> -->
                <li>
                    <span>名称简称:</span>
                    <select id="type_name">
                        <option value="PL">PL</option>
                        <option value="SO">SO</option>
                        <option value="WN">WN</option>
                        <option value="BL">BL</option>
                        <option value="SW">SW</option>
                        <option value="Th">Th</option>
                        <option value="PJ">PJ</option>
                    </select>
                </li>
                <li>
                    <span>密封面:</span>
                    <select id="ss">
                        <option value="RF">RF</option>
                        <option value="M">M</option>
                        <option value="FM">FM</option>
                        <option value="T">T</option>
                        <option value="G">G</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
    <a href="javascript:;" onclick="search_list()" class="search-button">
        确认
    </a>
    <table class="goods-list" id="table">
        <thead>
            <tr id="list-title">
                <th rowspan="2">规格</th>
                <th colspan="4">含税单价</th>
            </tr>
            <tr id="pressure">
                <td>PN10</td>
                <td>PN16</td>
                <td>PN25</td>
                <td>PN40</td>
            </tr>
        </thead>
        <tbody id="goods-list">
            
        </tbody>
    </table>
    <a href="javascript:;" onclick="xlsx()" class="xlsx-button">
        数据导出
    </a>
</div>
<script>
    var data = {};
    set_material_data('304');
    // set_goods_name('HG/T20592-2009');
    // function set_goods_name(value) {
    //     goods_name = document.getElementById('goods_name');
    //     let list = type_list[value], string = '';
    //     list.forEach(item => {
    //         string += '<option value="' + item + '">' + item + '</option>'
    //     });
    //     goods_name.innerHTML = string;
    //     set_goods_strand(list[0]);
    // }
    function exportTableToExcel(tableId, filename = 'exported.xlsx') {  
        const table = document.getElementById(tableId);  
        const ws_name = "Sheet1";  
    
        const wb = XLSX.utils.book_new();  
        const ws = XLSX.utils.table_to_sheet(table, { header: 1 }); // 假设表格的第一行是标题行  
    
        XLSX.utils.book_append_sheet(wb, ws, ws_name);  
    
        // 生成Excel文件的二进制字符串表示  
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });  
    
        // 创建一个Blob对象  
        const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });  
    
        // 创建一个临时的a标签用于下载  
        const link = document.createElement("a");  
        link.href = URL.createObjectURL(blob);  
        link.setAttribute("download", filename);  
        document.body.appendChild(link);  
        link.click();  
    
        // 清理  
        document.body.removeChild(link);  
    }  
    
    // 字符串转ArrayBuffer  
    function s2ab(s) {  
        const buf = new ArrayBuffer(s.length);  
        const view = new Uint8Array(buf);  
        for (let i = 0; i < s.length; i++) {  
            view[i] = s.charCodeAt(i) & 0xFF;  
        }  
        return buf;  
    }  
    
    // 假设你的表格ID是'myTable'  
    function xlsx(){
        document.getElementById('xlsx-table').innerHTML = document.getElementById('table').innerHTML;
        document.getElementById('xlsx-div').style = 'display:block';
        document.getElementById('button').style = 'display:block';
    }
    function notxlsx(){
        document.getElementById('xlsx-div').style = 'display:none';
        document.getElementById('button').style = 'display:none';
    }
    function set_material_data(value) {
        let data = material_value[value];
    }
    function set_goods_strand(value){
        goods_standard_name = value;
        document.getElementById('goods_type_name').value = type_list_type_name[value];
    }
    function search_list(){
        let string = '',
        material = document.getElementById('material').value,
        piping = document.getElementById('piping').value,
        type_name = document.getElementById('type_name').value,
        ss = document.getElementById('ss').value
        let goods_data = {
            material:material,
            piping:piping,
            type_name:type_name,
            ss:ss
        }
        $.ajax({
            url: '/falan', // 你的 PHP 脚本的 URL
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'
            dataType: 'json', // 预期服务器返回的数据类型
            data: goods_data,
            success: function (res) {
                if(res.code == 200){
                    let pressure = res.data.pressure;
                    pressure.forEach(function(item,index){
                        string += '<td>' + item + '</td>';
                    });
                    document.getElementById('list-title').innerHTML = '<th rowspan="2">规格</th><th colspan="' + pressure.length + '">含税单价</th>';
                    document.getElementById('pressure').innerHTML = string;
                    let list = res.data.list;
                    string = '';
                    console.log(list);
                    let piping = document.getElementById('piping').value;
                    let ss = document.getElementById('ss').value;
                    for(index in list){
                        string += '<tr>'
                        string += '<td>' + index + '-' + piping + '-' + ss + '</td>';
                        for(item in list[index]){
                            string += '<td>' + list[index][item] + '</td>';
                        }
                        string += '</tr>';
                    };
                    document.getElementById('goods-list').innerHTML = string;
                }
            }
        });
    }
</script>
</html>